<template>
  <div v-if="certified === 'true'" class="moment">
    <div class="school"><van-icon name="location" />{{ school }}</div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 今日热点 -->
    <van-collapse v-model="collapse">
      <van-collapse-item name="1">
        <template #title>
          <div style="color: #ee0a24; font-weight: bold">
            <van-icon
              name="fire-o"
              color="#ee0a24"
              size="20px"
              style="vertical-align: text-bottom"
            />
            今日热点
          </div>
        </template>
        <momentStrip
          v-for="(item, index) in hot"
          :key="index"
          :pieceData="item"
          :showOpera="true"
        />
      </van-collapse-item>
    </van-collapse>
    <!-- 分类 -->
    <div style="padding-bottom: 100px">
      <van-tabs v-model="activeName" @click="changeType" animated>
        <!-- 全部校友圈 -->
        <van-tab title="全部" name="0">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <momentStrip
                v-for="(item, index) in momentAll"
                :key="index"
                :pieceData="item"
                :showOpera="true"
              />
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <!-- 交友校友圈 -->
        <van-tab title="交友" name="1">
          <momentStrip
            v-for="(item, index) in datingMoments"
            :key="index"
            :pieceData="item"
            :showOpera="true"
          />
        </van-tab>
        <!-- 失物校友圈 -->
        <van-tab title="失物" name="2">
          <momentStrip
            v-for="(item, index) in lostMoments"
            :key="index"
            :pieceData="item"
            :showOpera="true"
          />
        </van-tab>
        <!-- 交易校友圈 -->
        <van-tab title="交易" name="4">
          <momentStrip
            v-for="(item, index) in tradeMoments"
            :key="index"
            :pieceData="item"
            :showOpera="true"
          />
        </van-tab>
        <!-- 答疑校友圈 -->
        <van-tab title="答疑" name="3">
          <momentStrip
            v-for="(item, index) in questionMoments"
            :key="index"
            :pieceData="item"
            :showOpera="true"
          />
        </van-tab>
      </van-tabs>
    </div>
    <van-icon
      name="search"
      size="30px"
      color="#0B3861"
      class="search_icon"
      @click="$router.push('/search')"
    />
    <van-icon
      name="add"
      size="50px"
      color="#0B3861"
      class="release_icon"
      @click="$router.push('/release')"
    />
  </div>
  <div v-else>
    <certifyTip />
  </div>
</template>

<script>
import momentStrip from "@/components/momentStrip";
import certifyTip from "@/components/certifyTip";
import { Toast } from "vant";
export default {
  components: {
    momentStrip,
    certifyTip,
  },

  data() {
    return {
      certified: localStorage.getItem("certified"),
      school: "",
      images: [],
      collapse: [],
      hot: [],
      message: "",
      momentAll: "",
      datingMoments: "",
      lostMoments: "",
      questionMoments: "",
      tradeMoments: "",
      isComment: false,
      value: "",
      activeName: "a",
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      showBTT: false,
    };
  },

  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    // 点击不同分类
    changeType(name) {
      this.$axios.get(`/getMomentAll?type=${name}`).then((res) => {
        if (name == "1") {
          this.datingMoments = res.data;
        } else if (name == "2") {
          this.lostMoments = res.data;
        } else if (name == "3") {
          this.questionMoments = res.data;
        } else if (name == "0") {
          this.momentAll = res.data;
        } else {
          this.tradeMoments = res.data;
        }
      });
    },
    // 回到顶部
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // scrollToTop() {
    //   const that = this;
    //   let scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   that.scrollTop = scrollTop;
    //   if (that.scrollTop > 100) {
    //     that.showBTT = true;
    //   } else {
    //     that.showBTT = false;
    //   }
    // },
  },
  created() {
    this.school =
      this.$store.state.userInfo.school || localStorage.getItem("school");
    this.$axios.get("/getCarousel").then((res) => {
      for (let key in res.data) {
        this.images.push(res.data[key].src);
      }
    });
    this.$axios.get("/getMomentAll?type=0").then((res) => {
      this.momentAll = res.data;
      console.log("momentAll", res.data);
    });
    this.$axios.get("/getHot").then((res) => {
      this.hot = res.data;
    });
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
};
</script>

<style scoped>
.moment {
  text-align: left;
}
.school {
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255, 0.7);
  z-index: 999;
}
.swiper {
  width: 100vw;
}
.operate {
  text-align: right;
}
.BTT_icon {
  position: fixed;
  right: 4vw;
  bottom: 7vh;
}
.search_icon{
  position: fixed;
  right: 5vw;
  bottom: 20vh;
}
.release_icon {
  position: fixed;
  right: 3vw;
  bottom: 12vh;
}
</style>